<template>
    <div class="two">
        <TopBar class="t" :url="'/'"></TopBar>
        <div class="box">
            <div class="mask-left"></div>
            <div class="mask-right"></div>
            <div class="mask-left-2"></div>
            <div class="mask-right-2"></div>
            <h2>设置您的身高</h2>
            <div class="height">
                <input type="text" disabled :value="height">
            </div>
            <canvas class="canvas" ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
            <h2>设置您的体重</h2>
            <div class="height">
                <input type="text" disabled :value="weight">
            </div>
            <canvas class="canvas2" ref="canvas2" :width="canvasWidth2" :height="canvasHeight2"></canvas>
            <button @click="next">下一步 (1/3)</button>
        </div>

    </div>
</template>

<script>
    import TopBar from "../../component/TopBar";
    export default {
        name: "Step2",
        data(){
            return{
                set:null,
                canvasWidth:0,
                canvasWidth2:0,
                canvasHeight:0,
                canvasHeight2:0,
                height:0,
                weight:0
            }
        },
        methods:{
            next(){
                this.$router.push('/two')
            }
        },
        components:{
            TopBar
        },
        created() {
            this.canvasWidth = 4.535*document.documentElement.clientWidth
            this.canvasHeight =  0.065 * document.documentElement.clientHeight
            this.canvasWidth2=4*document.documentElement.clientWidth
            this.canvasHeight2=0.065 * document.documentElement.clientHeight
        },
        mounted() {
            let w = document.documentElement.clientWidth
            let h = document.documentElement.clientHeight
            let canvas=this.$refs.canvas
            let ctx=canvas.getContext('2d')
            for (let i=0;i<=260;i++){
                if (i%10===0){
                    drawLine(0.018116*w*i,0.02415*w,0.018116*w*i,-0.043*w,'black',1)
                    drawText(`${i}`,0.018116*w*i-0.02415*w,0.101449*w)
                }
                drawLine(0.018116*w*i,0.02415*w,0.018116*w*i,0.0483*w,'black',1)
            }

            function drawLine(x1,y1,x2,y2,color,width) {
                ctx.beginPath()
                ctx.moveTo(x1,y1)
                ctx.lineTo(x2,y2)
                ctx.lineCap='round'
                ctx.lineWidth=width
                ctx.strokeStyle=color||'#000'
                ctx.stroke()
                ctx.closePath()
            }

            function drawText(text,x,y) {
                ctx.font=`normal 400 13px 微软雅黑`
                ctx.fillStyle='black'
                ctx.fillText(text,x,y)
            }

            let offset=0
            let leave='-9.65rem'
            let sub=0
            canvas.addEventListener('touchstart',touchHandler)
            //28 :0
            canvas.style.left='-9.65rem'
            this.height=Math.abs( canvas.style.left.slice(0,-3))*100/this.canvasWidth*332>>>0
            let self=this
            function touchHandler(e) {
                if (e.type==='touchstart'){
                    e.preventDefault()
                    document.addEventListener('touchend',touchHandler)
                    document.addEventListener('touchmove',touchHandler)
                    offset=e.changedTouches[0].clientX
                    document.div=this
                }else if (e.type==='touchmove'){
                    let way=e.changedTouches[0].clientX-offset
                    console.log(this.div.style.left)
                    this.div.style.left=-Math.abs(leave.slice(0,-3))+way/100+'rem'
                    self.height=Math.abs( this.div.style.left.slice(0,-3))*100/self.canvasWidth*332>>>0
                    if (self.height>250)self.height=250
                    parseInt(this.div.style.left) > 1.88 && (this.div.style.left = '1.88rem')
                    parseInt(this.div.style.left) <-15.08 && (this.div.style.left = '-15.08rem')
                }else{
                    leave=this.div.style.left
                    document.removeEventListener('touchend',touchHandler)
                    document.removeEventListener('touchmove',touchHandler)
                }
            }




            let canvas2=this.$refs.canvas2
            let ctx2=canvas2.getContext('2d')
            for (let i=0;i<=260;i++){
                if (i%10===0){
                    drawLine2(0.018116*w*i,0.02415*w,0.018116*w*i,-0.043*w,'black',1)
                    drawText2(`${i}`,0.018116*w*i-0.02415*w,0.101449*w)
                }
                drawLine2(0.018116*w*i,0.02415*w,0.018116*w*i,0.0483*w,'black',1)
            }

            function drawLine2(x1,y1,x2,y2,color,width) {
                ctx2.beginPath()
                ctx2.moveTo(x1,y1)
                ctx2.lineTo(x2,y2)
                ctx2.lineCap='round'
                ctx2.lineWidth=width
                ctx2.strokeStyle=color||'#000'
                ctx2.stroke()
                ctx2.closePath()
            }

            function drawText2(text,x,y) {
                ctx2.font=`normal 400 13px 微软雅黑`
                ctx2.fillStyle='black'
                ctx2.fillText(text,x,y)
            }

            let offset2=0
            let leave2='-2.19rem'
            let sub2=0
            canvas2.addEventListener('touchstart',touchHandler2)
            //28 :0
            canvas2.style.left='-2.19rem'
            this.weight=Math.abs( canvas2.style.left.slice(0,-3))*100/this.canvasWidth2*454>>>0
            let self2=this
            function touchHandler2(e) {
                if (e.type==='touchstart'){
                    e.preventDefault()
                    document.addEventListener('touchend',touchHandler2)
                    document.addEventListener('touchmove',touchHandler2)
                    offset2=e.changedTouches[0].clientX
                    document.div=this
                }else if (e.type==='touchmove'){
                    let way2=e.changedTouches[0].clientX-offset2
                    this.div.style.left=-Math.abs(leave2.slice(0,-3))+way2/100+'rem'
                    self2.weight=Math.abs( this.div.style.left.slice(0,-3))*100/self2.canvasWidth2*454>>>0
                    if (self.weight>150)self.weight=150
                    parseInt(this.div.style.left) > 1.88 && (this.div.style.left = '1.88rem')
                    parseInt(this.div.style.left) <-8.305 && (this.div.style.left = '-8.305rem')
                }else{
                    leave2=this.div.style.left
                    document.removeEventListener('touchend',touchHandler2)
                    document.removeEventListener('touchmove',touchHandler2)
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .two
        width 100vw
        height 100vh
        background-color #ffffff
        text-align center
        .box
          overflow hidden
          .mask-left
            width 0.5rem
            height 0.21rem
            background-image linear-gradient(to right, #ffffff,transparent)
            position absolute
            left 0
            top 1.52rem
            z-index 2
          .mask-right
            position absolute
            width 0.5rem
            height 0.21rem
            background-image linear-gradient(to left ,#ffffff,transparent)
            right 0
            top 1.52rem
            z-index 2
          .mask-left-2
              width 0.5rem
              height 0.21rem
              background-image linear-gradient(to right, #ffffff,transparent)
              position absolute
              left 0
              top 3.45rem
              z-index 2
          .mask-right-2
              position absolute
              width 0.5rem
              height 0.21rem
              background-image linear-gradient(to left ,#ffffff,transparent)
              right 0
              top 3.45rem
              z-index 2
          .height
            position relative
            &::after
              content ""
              display block
              position absolute
              top 0.48rem
              left 1.78rem
              width 0
              height 0
              border-top 0.12rem solid #7C6DF0
              border-left 0.1rem solid transparent
              border-right 0.1rem solid transparent
            &::before
                z-index 1
                content ""
                display block
                position absolute
                top 0.62rem
                left 1.865rem
                width 0.03rem
                height 0.32rem
                background-color #7C6DF0
          .canvas
            position absolute
            top 1.37rem
            left 0
            margin-top 0.15rem
            background-color #ffffff
          .canvas2
            position absolute
            top 3.3rem
            left 0
            margin-top 0.15rem
            background-color #ffffff
          input
            background-image linear-gradient(to right,#6D5EEC,#8B7CF4)
            width 0.68rem
            height 0.3rem
            color #ffffff
            border-radius 8%
            font-weight 600
            margin 0.2rem 0 0.1rem 0
            text-align center
          h2
            margin-top 0.2rem
            font-size 0.16rem
            font-weight 300
            &:nth-of-type(2)
                margin-top 1.1rem
          button
              background-color #6739FE
              width 3.3rem
              height 0.45rem
              border-radius 0.2rem
              color #ffffff
              font-size 0.14rem
              font-weight 600
              border none
              cursor pointer
              margin-top 2.4rem
        .t
            padding 0.2rem 0 0 0.2rem
</style>